﻿<!doctype html>
<html>
  <head>
    <title>渐变目录导航</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
      margin:0; 
      padding:0;
      font-family:Arial;
      background:#ccc;
    }
    header {
      text-shadow: 0 1px #000;
      background: #ff3019; /* Old browsers */
      background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 20%, #ff3019 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(20%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* W3C */
    }
    h1 {
      padding:0.5em 0.2em; 
      margin:0;
      font-size: 18px;
      color:white;
    }
    h2 {
      text-shadow: 0 1px #FFFFFF;
      background: #eeeeee; /* Old browsers */
      background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
      padding:0.5em 0.2em; 
      margin:0;
      font-size: 16px;
      color:#000;
    }
    nav ul {
      border-top:1px solid #fff;
      list-style-type: none;
      padding:0;
      margin:0;
    }
    nav li {
      padding:0.5em 0.2em; 
      margin:0;
      background:#AFAFAF;
      border-bottom:1px solid #fff;
    }
    nav li a {
      height:20px;
      display:block;
      text-decoration:none;
      color:white;
    }
    </style>
  </head>
  <body>
    <header>
      <h1>渐变目录导航</h1>
    </header>
    <div id="main">
      <h2>Pages</h2>
      <nav>
        <ul class="list">
          <li class="list"><a href="music.html">Music</a></li>
          <li class="list"><a href="radio.html">Radio</a></li>
          <li class="list"><a href="events.html">Events</a></li>
          <li class="list"><a href="charts.html">Charts</a></li>
          <li class="list"><a href="community.html">Community</a></li>
          <li class="list"><a href="help.html">Help</a></li>
          <li class="list"><a href="about.html">About</a></li>
        </ul>
      </nav>
    </div>
    <footer>
      <small>&copy; 2011 first.fm</small>
    </footer>
  </body>
</html>


 